import {View, Dimensions} from 'react-native';
import {Empty, Img, ImgText5, ObserverView, Tabs} from '../../components';
import {memo, ReactNode, useCallback, useEffect, useState} from 'react';
import {BindItem} from '../../mobx/home';
import {dpw16, dpw48, dpw8} from '../../constants';
import {observer} from 'mobx-react-lite';
import {useUserInfoStore} from '../../mobx';
import {useFocusEffect} from '@react-navigation/native';

const screenWidth = Dimensions.get('screen').width;

const PratialImg = ({url}: any) => {
  const [size, setSize] = useState({width: screenWidth, height: 0});

  const getImgSize = (w: number, h: number) => {
    setSize(sz => ({...sz, height: (screenWidth * h) / w}));
  };

  return (
    <ObserverView themeStyle={{backgroundColor: 'color_25'}}>
      <Img
        style={size}
        url={url}
        getImgSize={getImgSize}
        borderRadius={0}
        resizeMode="contain"
      />
    </ObserverView>
  );
};

export const LoadImgs = memo(
  ({
    list,
    afterNode,
    cId,
  }: {
    list: string[];
    afterNode?: ReactNode;
    cId?: number;
  }) => {
    // const [curIdx, setCurIdx] = useState(1);

    // useEffect(() => {
    //   if (list?.length > 0) {
    //     setCurIdx(preIdx => {
    //       if (preIdx !== 1) {
    //         return preIdx + 1;
    //       }
    //       return 1;
    //     });
    //   }
    // }, [list?.length, cId]);

    // const isNoLast = Array.isArray(list) ? list.length > curIdx : false;

    // console.log({curIdx, isNoLast});

    // const onAdCurIdx = (idx: number) => {
    //   if (isNoLast && curIdx === idx + 1) {
    //     setCurIdx(preI => preI + 1);
    //   }
    // };

    return (
      <>
        {list.map((url, i) => (
          <PratialImg key={i} url={url} idx={i} />
        ))}
        {afterNode}
      </>
    );
  },
);

const ComCardoon = observer(({navigation, data, index}: any) => {
  const {userInfo} = useUserInfoStore();

  const toDetail = (bId: number) => {
    if (navigation) {
      if (!userInfo?.Token) {
        navigation.navigate('Login');
      } else if (bId) {
        navigation.navigate('cartoon-detail', {bId});
      }
    }
  };

  return (
    <View
      style={{
        paddingHorizontal: dpw16,
        display: index !== 1 ? 'none' : 'flex',
      }}>
      {Array.isArray(data?.list) ? (
        data.list.map((it: BindItem) => (
          <ImgText5 key={it.BID} {...it} toDetail={toDetail} />
        ))
      ) : (
        <Empty />
      )}
    </View>
  );
});

const CartoonDetail = ({data, index}: any) => {
  return (
    <View style={{display: index !== 0 ? 'none' : 'flex'}}>
      {Array.isArray(data?.chapInfo?.ImageList) ? (
        <LoadImgs list={data?.chapInfo?.ImageList} />
      ) : (
        <Empty />
      )}
    </View>
  );
};

const titles = [
  {
    id: 1,
    tKey: 'cardoon_detail',
    type: 'tab-title',
    children: <CartoonDetail />,
    left: -dpw48,
  },
  {
    id: 2,
    tKey: 'com_cardoon',
    type: 'tab-title',
    children: <ComCardoon />,
    left: dpw48,
  },
];

const FirstDetail = ({navigation, data, chapInfo}: any) => {
  return (
    <Tabs
      titles={titles}
      navigation={navigation}
      titleboxStyle={{
        justifyContent: 'center',
        borderBottomWidth: 1,
        marginBottom: dpw8,
      }}
      titleboxTheme={{borderColor: 'color_9'}}
      data={{list: data, chapInfo}}
    />
  );
};

export default FirstDetail;
